<template>
    <div class="main">
        <el-aside width="200px" class="el-aside">
            <el-scrollbar max-height="calc(100vh - 56px)">
                <el-menu class="el-menu" background-color="#ffffff" :unique-opened="true" text-color="#000000"
                    :default-active="route.path" :router="true">
                    <MenuTree :menuList="menuList"></MenuTree>
                </el-menu>
            </el-scrollbar>
        </el-aside>
          <el-main class="el-main">
            <el-header style="margin-top:10px;height:20px" v-if="route.path != '/home'">
                <commonHeader></commonHeader>
            </el-header>
            <router-view></router-view>
          </el-main>
    </div>
</template>
<script setup>
import {ref,reactive, toRefs} from 'vue'
import { useRoute } from 'vue-router'
import * as format from '@/utils/format.js'
import commonHeader from './common-header.vue'
import MenuTree from '@/components/menu/menuTree.vue'
import icon1 from '@/assets/index.svg'
let route = useRoute()
let menu_list = [
  {
    id: '0',
    menu_name: '首页',
    menu_url: '/home',
    icon: 'fa fa-gitlab'
  },
  {
    id: '1',
    menu_name: '设置',
    menu_url: 'setting',
    parent_id: 0,
    icon: 'fa fa-cog'
  }, {
    id: '1-1',
    menu_name: '权限设置',
    menu_url: 'setting.permission',
    parent_id: '1',
    icon: 'fa fa-cog'
  }, {
    id: '1-1-1',
    menu_name: '用户管理列表',
    menu_url: 'setting.permission.user_list',
    parent_id: '1-1'
  }, {
    id: '1-1-2',
    menu_name: '用户管理新增',
    menu_url: 'setting.permission.user_add',
    parent_id: '1-1'
  }, {
    id: '1-1-3',
    menu_name: '角色管理列表',
    menu_url: 'setting.permission.role_list',
    parent_id: '1-1'
  }, {
    id: '1-2',
    menu_name: '菜单设置',
    menu_url: 'setting.menu',
    parent_id: '1'
  }, {
    id: '1-2-1',
    menu_name: '菜单列表',
    menu_url: '/system/menu/list',
    parent_id: '1-2'
  }, {
    id: '1-2-2',
    menu_name: '菜单添加',
    menu_url: '/system/menu/add',
    parent_id: '1-2'
  }, {
    id: '2',
    menu_name: '订单',
    menu_url: 'order',
    parent_id: 0
  }, {
    id: '2-1',
    menu_name: '报单审核',
    menu_url: 'order.orderreview',
    parent_id: '2'
  }, {
    id: '2-2',
    menu_name: '退款管理',
    menu_url: 'order.refundmanagement',
    parent_id: '2'
  }
]
let a = format.flatToTree({arrayList: menu_list, pidStr:'parent_id'})
console.log('a=', a)
let menuList = ref([])
menuList = a
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.el-menu.el-menu--vertical.el-menu{
  border: none;
}
.main{
    width: 100%;
    height: calc(100% - 56px);
    display: flex;
    /* background: rgb(204, 228, 148); */
}
  .el-aside {
    width: 200px;
    /* background-color: #32323a; */
    height: 100%;
    border-right: 1px solid #dbdadf;
  }
  .el-main {
    background-color: #E9EEF3;
    width: calc(100% - 200px);
    height: 100%;
    border-right: none;
    padding: 0;
  }
</style>